<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Torneo de las Fresas 2025</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #eec7d4, #f25287);
            min-height: 100vh;
        }
        
        .main-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .strawberry-icon {
            width: 120px;
            filter: drop-shadow(0 4px 6px rgba(255, 64, 129, 0.3));
        }
    </style>
</head>
<body class="d-flex align-items-center">
    <div class="container py-5">
        <div class="main-card p-5 text-center mx-auto" style="max-width: 1000px;">
            <img src="https://tdlf-2025.vercel.app/_next/image?url=%2Flogo.png&w=1920&q=100" 
                 alt="Fresa" 
                 class="strawberry-icon mb-4">
            
            <h1 class="display-4 fw-bold text-danger mb-3", text-align="center",>
                API de Análisis de Datos y Machine Learning
            </h1>

            <h2 class="text-muted mb-4">
                Torneo de las Fresas 2025
            </h2>
            <div class="row mt-5 g-4">
                <div class="col-md-4">
                    <div class="card h-100 border-success">
                        <div class="card-body">
                            <h5 class="card-title">🧠 Modelos IA</h5>
                            <p class="text-muted">Análisis profundo de los datos.</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card h-100 border-primary">
                        <div class="card-body">
                            <h5 class="card-title">📊 Datos precisos</h5>
                            <p class="text-muted">Conociendo de cerca la información.</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card h-100 border-warning">
                        <div class="card-body">
                            <h5 class="card-title">🏅 Player Analytics</h5>
                            <p class="text-muted">Rendimiento, sinergia y métricas clave.</p>
                        </div>
                    </div>
                </div>
            </div>

            <footer class="mt-5 pt-4 border-top">
                <p class="text-muted">
                    In Data We Trust
                </p>
            </footer>
        </div>
    </div>
</body>
</html>